<template>
  <div class="product">
    <div class="top">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{className}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    <ul class="content">
      <li class="good" v-for="item in proDetail" :key="item.id">
        <img :src="item.s_goods_photos[0].path" alt="" @click="goDetail(item.id)">
        <h3>{{item.name}}</h3>
        <p>{{item.desc}}</p>
        <p>￥{{item.price}}</p>
        <div class="bnts">
          <button @click="goDetail(item.id)">查看详情</button>
          <button>加入购物车</button>
        </div>
      </li>
    </ul>
    <RightAside />
  </div>
</template>

<script>
// 引入侧边栏组件
import RightAside from '../components/RightAside.vue';
import { getClassify, getGoods } from "@/assets/request.js"
export default {
  name: "Product",
  data() {
    return {
    //  手机，电脑，平板数据
      res1: [],
      res2: [],
      res3: [],
      className:"",
    }
  },
  components:{
    RightAside,
  },
  methods: {
    // 详情页
    goDetail(id) {
      localStorage.removeItem("goodId")
      this.$router.push({
        name: "detail",
        params: {
          id,
        }
      })
    },
  },
  async mounted() {
    // 获取商品列表
    let res = await getGoods({
      project_id: 255,
    })
    // console.log(res);
    // 分类
    let classifyRes = await getClassify({
      project_id: 255,
    })
    // 找到手机 电脑 平板三个内容
    let arr = classifyRes.data.result
    arr = arr.splice(0, 3)
    // console.log(arr);
    // 手机信息
    let resPhone = arr.filter(item => item.id == 2128)
    resPhone[0].children.forEach(item => {
      this.res1.push(...item.s_goods)
    })
    // 电脑信息
    let resComputer = arr.filter(item => item.id == 2129)
    resComputer[0].children.forEach(item => {
      this.res2.push(...item.s_goods)
    })

    // 平板信息
    let resFlat = arr.filter(item => item.id == 2130)
    // console.log(this.resFlat);
    resFlat[0].children.forEach(item => {
      this.res3.push(...item.s_goods)
    })
    if (this.$route.params.id == 2128) {
      this.proDetail = this.res1
      this.className = '手机'
    } else if (this.$route.params.id == 2129) {
      this.proDetail = this.res2
      this.className = '电脑'
    } else{
      this.proDetail = this.res3
      this.className = '平板'
    }
  },
}
</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.product {
  width: 100%;
  background-color: rgb(226, 229, 231);
  .top{
    padding: vw(25) 0 vw(25) vw(70);
  }
  .content {
    width: vw(1212);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-evenly;

    .good {
      width: vw(291);
      height: vw(420);
      background-color: #fff;
      text-align: center;
      margin: 0 vw(6) vw(16) vw(6);

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
      }

      img {
        width: vw(291);
        height: vw(254);
      }

      h3 {
        height: vw(26);
        font-weight: 400;
        font-size: vw(15);
        line-height: vw(26);
        margin: vw(10) vw(10) 0 vw(10);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p:nth-of-type(1) {
        color: rgb(173, 172, 172);
        height: vw(25);
        font-size: vw(12);
        line-height: vw(25);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p:nth-of-type(2) {
        color: red;
        font-size: vw(18);
        margin: 0 0 vw(15) 0;
      }

      .bnts {
        margin: 0 vw(50);
        display: flex;
        justify-content: space-between;

        button:nth-of-type(1) {
          padding: vw(5) vw(8);
        }

        button:nth-of-type(2) {
          padding: vw(5) vw(8);
          color: red;
          // background-color: red;
        }
      }

    }
  }
}
</style>

